<!-- stat widget -->
<template>
  <div class="statwidget" :class="leftBorder">
    <p class="statwidget_title">{{ title }}</p>
    <div class="statwidget_info">
      <div class="num">{{ num }}</div>
      <div class="icon">
        <div class="circle statwidget_circle" :class="circleBg">
          <el-icon :size="30" class="statwidget_circle_icon" :color="colorCode">
            <slot></slot>            
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>


<script lang="ts">
import { defineComponent ,ref } from 'vue'
import { Bell } from '@element-plus/icons'



export default defineComponent({
  name: 'StatWidget',
  components: {
    Bell
  },
  props:{
    // 标题
    title:{
      type: String,
      default: "",
      required: false
    },

    // 标题名
    num:{
      type: String,
      default: "",
      required: false
    },

    // grey,blue,green,yellow,red
    color:{
      type: String,
      default: null,
      required: false
    },

  },
  data(){
    return {
      loading : false,
      data: null,
      options: [] as any
    }
  },

  methods:{

    init(suc?:any) {

    },


    clear() {
      // this.data = null;
    }

  },

  computed: {
    leftBorder(){
      if(this.color == "green"){
        return "statwidget_bl__green"
      }

      if(this.color == "grey"){
        return "statwidget_bl__grey"
      }

      if(this.color == "yellow"){
        return "statwidget_bl__yellow"
      }

      if(this.color == "red"){
        return "statwidget_bl__red"
      }

      if(this.color == "blue"){
        return "statwidget_bl__blue"
      }

      return "statwidget_bl__grey"
    },


    circleBg(){
      if(this.color == "green"){
        return "statwidget-bg__green"
      }

      if(this.color == "grey"){
        return "statwidget-bg__grey"
      }

      if(this.color == "yellow"){
        return "statwidget-bg__yellow"
      }

      if(this.color == "red"){
        return "statwidget-bg__red"
      }

      if(this.color == "blue"){
        return "statwidget-bg__blue"
      }

      return "bg__grey"
    },

    colorCode(){
      if(this.color == "green"){
        return "#67C23A"
      }

      if(this.color == "grey"){
        return "#909399"
      }

      if(this.color == "yellow"){
        return "#e6a23c"
      }

      if(this.color == "red"){
        return "#F56C6C"
      }

      if(this.color == "blue"){
        return "#409eff"
      }

      return "#909399"
    }
  },
  


  created() {},

  mounted(){
    this.init();


  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>



</style>
